<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>蓝源Eloan-P2P平台</title>
		<#include "common/links-tpl.ftl" />
		<link type="text/css" rel="stylesheet" href="/css/account.css" />
		<script type="text/javascript" src="/js/plugins/jquery.twbsPagination.min.js"></script>
		<script type="text/javascript" src="/js/plugins-override.js"></script>
		<script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script>
		<script type="text/javascript" src="/js/videoAppointment.js"></script>
        <script type="text/javascript" src="/js/plugins/jquery.form.js"></script>

        <script type="text/javascript">
			$(function(){

			});
		</script>

		<style type="text/css">
			.orderTime{
				width: 110px;
				height: 60px;
                border:1px solid #e0e0e0;
				margin: 5px;
				float: left;
				text-align: center;
				border-radius:5px;
				padding-top: 5px;
			}
			.orderBtn{
				border: 1px solid #e0e0e0;
				padding: 2px 5px;
                border-radius:5px;
				display: inline-block;
				margin-top: 1px;
                text-decoration:none !important;
				cursor: pointer;
			}
			.bg-info,.bg-success{
				padding: 10px;
				font-size: 16px;
			}
		</style>
		<script type="text/javascript">
			$(function(){
                for(var index in VIDEO_APPOINTMENT_TIME_LIST){
                    var item = VIDEO_APPOINTMENT_TIME_LIST[index];
					var times = item.begin + "-" + item.end;
                    $("<div class='orderTime'><div>" + times + "</div><div><a class='btn btn-primary btn_apply' data-time='"+times+"'>点击预约</a> </div></div>").appendTo("#appointmentTimes");
                }


                $(".btn_apply").click(function(){
                    var time = $(this).data("time");
                    $("#appointmentTime").val(time);

                    $("#applyForm").ajaxSubmit(function () {
                        $.messager.confirm("提示", "预约成功,请按时进行视频认证!", function () {
                            window.location.reload();
                        });
                    });
                });
			});
		</script>
	</head>
	<body>
	
		<!-- 网页顶部导航 -->
		<#include "common/head-tpl.ftl" />
		<!-- 网页导航 -->
		<#assign currentNav="personal" />
		<#include "common/navbar-tpl.ftl" />
		
		<div class="container">
			<div class="row">
				<!--导航菜单-->
				<div class="col-sm-3">
					<#assign currentMenu="ipLog" />
					<#include "common/leftmenu-tpl.ftl" />		
				</div>
				<!-- 功能页面 -->
				<div class="col-sm-9">
               		<p class="bg-info">视频认证审核时间预约</p>
					<form action="/videoAudit_apply" name="applyForm" id="applyForm" class="form-inline" method="post">
						<input type="hidden" name="appointmentTime" id="appointmentTime"/>

						<div class="form-group">
						    <label>预约客服</label>
						    <select class="form-control" name="customServiceId" >
								<#list customServices as s>
						    		<option value="${s.id}"> ${s.username} </option>
								</#list>
						    </select>
						</div>
						&emsp;
						<div class="form-group">
						    <label>预约日期</label>
						    <select class="form-control" name="appointmentDate" >
								<#list appointmentDates as d>
						    		<option>${d?string("yyyy-MM-dd")}</option>
								</#list>
						    </select>
						</div>
					</form>

					<div class="panel panel-default" style="margin-top: 20px;height: 400px">
						<div class="panel-heading">
							预约时间
						</div>
						<div id="appointmentTimes">
							<!--显示预约时间-->
						</div>
					</div>
				</div>
			</div>
		</div>		
						
		<#include "common/footer-tpl.ftl" />
	</body>
</html>